<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Quartz任务日志</title>
    <link rel="Shortcut Icon" type="image/x-icon" href="https://leigq-blog.oss-cn-shenzhen.aliyuncs.com/gitee/quartz_lite_favicon.ico" />
    <script src="/static/quartzlite/js/vue.js"></script>
    <script src="/static/quartzlite/js/vue-resource.js"></script>
    <!-- 引入样式 -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        #top {
            margin-left: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div id="log">
    <template>
        <div id="top">
            <el-button v-if="this.embedded === false" size="small" @click="logout" style="position:absolute; right: 20px;" round type="danger" plain icon="el-icon-s-home">退出登录</el-button>

            <div style="display: flex; justify-content: left; ">
                <img style="width: 130px; margin-top: -5px" src="https://leigq-blog.oss-cn-shenzhen.aliyuncs.com/gitee/logo.png">
            </div>
        </div>
    </template>
    <br/>

    <div style="margin-top: -17px; margin-left: 10px;">
        <el-table height="800" :data="sysTaskLogList" border stripe>
            <el-table-column
                    align="center"
                    label="任务ID"
                    prop="id"
                    show-overflow-tooltip
                    sortable
                    width="90">
            </el-table-column>

            <el-table-column
                    align="center"
                    label="任务名"
                    prop="taskName"
                    show-overflow-tooltip
                    width="120">
            </el-table-column>

            <el-table-column
                    align="center"
                    label="执行时间"
                    prop="execDate"
                    show-overflow-tooltip
                    sortable
                    width="160">
            </el-table-column>

            <el-table-column
                    align="center"
                    align="center"
                    label="执行结果" prop="execResult"
                    width="150">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.execResult === -1">执行中</el-tag>
                    <el-tag v-if="scope.row.execResult === 1" type="success">成功</el-tag>
                    <el-tag v-if="scope.row.execResult === 0" type="danger">失败</el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    fixed="right"
                    align="center"
                    label="成功或异常信息"
                    prop="execResultText"
                    show-overflow-tooltip
                    width="1200">
                <template slot-scope="scope">
                    <el-input auto-complete="off" autosize disable type="textarea" v-model="scope.row.execResultText"></el-input>
                </template>
            </el-table-column>
        </el-table>

        <div align="center" style="margin-top: 10px">
            <el-pagination
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]"
                    :total="totalCount"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </div>
    </div>

</div>

<footer align="center">
    <p style="font-size: 14px; color: #b6b6b7">

        <span>Powered by leigq Quartz-Lite: 1.2.0 Copyright&copy;2020-2021</span>

        <a style="color: #3482f6" href="https://gitee.com/leiguoqing/quartz-lite-starter">Gitee</a> |
        <a style="color: #3482f6" href="https://github.com/MRLEILOVE/quartz-lite-starter">GitHub</a>
    </p>
</footer>

<script>
    Vue.http.headers.common['language'] = 'en';
    var vue = new Vue({
        el: "#log",
        data: {
            //表格当前页数据
            sysTaskLogList: [],

            //请求的URL
            url: 'logs',

            //默认每页数据量
            pageSize: 10,

            //当前页码
            currentPage: 1,

            //查询的页码
            start: 1,

            //默认数据总数
            totalCount: 1000,

            // 是否嵌入系统
            embedded: false,
        },
        mounted() {
            // 获取是否嵌入系统
            this.getEmbedded();
        },
        methods: {
            // 登出
            logout() {
                this.$http.post('/quartz-lite/user/logout').then(function (res) {
                    var body = res.body;
                    var meta = body.meta;
                    if (meta.code === 0) {
                        this.notifySuccess(meta.msg);
                        // 跳转至登录页面
                        window.location.href = "login.html";
                    } else {
                        this.notifyWarning(meta.msg);
                    }
                }, function () {
                    this.notifyError(res.body.meta.msg);
                });
            },
            // 提醒通知
            notifyWarning(msg) {
                this.$notify({
                    title: '警告',
                    message: msg,
                    type: 'warning'
                });
            },

            // 成功通知
            notifySuccess(msg) {
                this.$notify({
                    title: '成功',
                    message: msg,
                    type: 'success'
                });
            },

            // 失败通知
            notifyError(msg) {
                this.$notify.error({
                    title: '错误',
                    message: msg,
                });
            },

            getUrlKey(name, url) {
                return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(url) || [, ""])[1].replace(/\+/g, '%20')) || null
            },

            initData(pageNum, pageSize) {
                var url = window.location.href
                const taskId = this.getUrlKey('taskId', url);

                this.$http.get('logs/' + taskId + '/' + pageNum + '/' + pageSize).then(function (res) {
                    var data = res.body.data;
                    var meta = res.body.meta;
                    switch (meta.code) {
                        case 0:
                            this.sysTaskLogList = data.records;
                            this.totalCount = data.total;
                            break;
                        case 1000:
                            // 跳转至登录页面
                            window.location.href = "login.html";
                            break;
                        default:
                            this.notifyWarning(meta.msg);
                            break;
                    }
                }, function () {
                    this.notifyError(res.body.meta.msg);
                });
            },

            //打开新页面
            windowOpen: function (url) {
                window.open(url, "_blank");
            },

            //每页显示数据量变更
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.initData(this.currentPage, this.pageSize);
            },

            //页码变更
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.initData(this.currentPage, this.pageSize);
            },

            // 获取是否嵌入系统
            getEmbedded() {
                this.$http.get('/quartz-lite/user/embedded').then(function (res) {
                    var body = res.body;
                    const meta = body.meta;
                    if (meta.code === 0) {
                        this.embedded = body.data;
                    } else {
                        this.notifyWarning(meta.msg);
                    }
                }, function () {
                    this.notifyError(res.body.meta.msg);
                });
            },
        },
    });

    //载入数据
    vue.initData(vue.currentPage, vue.pageSize);
</script>
</body>
</html>
